$(function() {
    $('.maps-btn-hook').on('click', function() {
        $(this).children('.maps-content-box').toggleClass('open');
    })
    showLine()
    showRadio()
    showPieTimeLine()
    showBar2()
    showPie2()
    var tableDataTest = {
        isNormal: true,
        zygy: [
            '四氢化铝钠制备', '硅烷制备1', '硅烷净化1', '四氟化铝钠(SAF)', '多晶硅制备'
        ],
        zywl: [

            '四氢化铝钠2', '四氟化硅1', '甲苯1', '四氟化硅', '三乙基铝2'
        ],
        zysb: ['反感器1', '精馏塔1', '贮罐1', '换热器1', '加热炉1']
    }
    $('#item-nav-hook').on('click', 'p', function() {
        $(this).addClass('on').siblings().removeClass('on');
        if (tableDataTest.isNormal) {

            $('#normal-hook').addClass('danger')
        } else {

            $('#normal-hook').removeClass('danger')

        }

        var html = '';
        var html2 = '';
        var html3 = '';
        $.each(tableDataTest.zygy, function(index, el) {
            html += ' <li class="no-wrap">' + el + '</li>'
            html2 += ' <li class="no-wrap">' + tableDataTest.zywl[index] + '</li>'
            html3 += ' <li class="no-wrap">' + tableDataTest.zysb[index] + '</li>'

        });

        $('#zygy').html(html)
        $('#zywl').html(html2)
        $('#zysb').html(html3)

    })
})

function showLine() {
    var myChart = echarts.init(document.getElementById('line-charts'));
    var option = {

        grid: {
            top: '5%',
            left: '3%',
            right: '2%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis'
        },
        color: [
            '#4BCEEC', '#4BCEEC'
        ],
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                // formatter: '{value} ',
                textStyle: {
                    color: '#97B8C9'

                }
            },
            axisLine: {
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#07274D'
                }
            },
            data: [
                '0',
                '5',
                '10',
                '15',
                '20',
                '25',
                '30',
                '35',
                '40',
                '45'
            ]
        },
        yAxis: {
            type: 'value',
            max: 100,
            min: 50,
            axisLabel: {
                formatter: '{value} ',
                textStyle: {
                    color: '#97B8C9'

                }
            },
            axisLine: {
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#07274D'
                }
            }
        },
        series: [
            {
                name: '检查',
                type: 'line',
                smooth: true,
                data: [
                    51,
                    71,
                    85,
                    93,
                    62,
                    93,
                    83,
                    72,
                    83,
                    90
                ],
                markLine: {
                    silent: true,
                    symbol: 'none',
                    label: {
                        normal: {
                            show: false
                        }

                    },
                    data: [
                        {
                            yAxis: 60,
                            lineStyle: {
                                normal: {
                                    color: '#EB3432',
                                    type: 'solid'
                                }
                            }
                        }, {
                            yAxis: 70,
                            lineStyle: {
                                normal: {
                                    color: '#F56D23',
                                    type: 'solid'
                                }
                            }
                        }, {
                            yAxis: 80,
                            lineStyle: {
                                normal: {
                                    color: '#F8E71C',
                                    type: 'solid'
                                }
                            }
                        }, {
                            yAxis: 90,
                            lineStyle: {
                                normal: {
                                    color: '#45D321',
                                    type: 'solid'
                                }
                            }
                        }
                    ]
                }
            }, {
                name: '趋势',
                type: 'line',
                smooth: true,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 2,
                            type: 'dotted'
                        }
                    }
                },
                data: [
                    91,
                    87,
                    62,
                    55,
                    93,
                    82,
                    75,
                    83,
                    62,
                    70
                ]
            }
        ]
    };

    myChart.setOption(option);

}
function showRadio() {
    var myChart = echarts.init(document.getElementById('radio-charts'));

    var option = {

        tooltip: {
            // trigger: 'axis'
        },
        legend: {
            x: 'center',
            itemWidth: 14,
            top: 50,
            itemGap: 6,
            itemHeight: 8,
            textStyle: {
                color: '#97B8C9'
            },
            data: ['2014', '2015', '2016', '2017']
        },
        radar: [

            {
                indicator: [
                    {
                        text: '法律法规和标准',
                        max: 100
                    }, {
                        text: '机构和职责',
                        max: 100
                    }, {
                        text: '风险管理',
                        max: 100
                    }, {
                        text: '管理制度',
                        max: 100
                    }, {
                        text: '教育培训',
                        max: 100
                    }, {
                        text: '生产设施设备',
                        max: 100
                    }, {
                        text: '作业安全',
                        max: 100
                    }, {
                        text: '职业健康',
                        max: 100
                    }, {
                        text: '事故与应急',
                        max: 100
                    }, {
                        text: '检查与自评',
                        max: 100
                    }
                ],
                // (function() {
                //     var res = [];
                //     for (var i = 1; i <= 12; i++) {
                //         res.push({
                //             text: i + '月',
                //             max: 100
                //         });
                //     }
                //     console.log(res);
                //     return res;
                //
                // })(),
                center: [
                    '50%', '60%'
                ],
                axisLine: {
                    show: false
                },
                splitNumber: 6,
                splitArea: {
                    areaStyle: {
                        color: [
                            '#07325D',
                            '#051E41',
                            '#07325D',
                            '#051E41',
                            '#07325D',
                            '#051E41'
                        ]
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#094578'
                    }
                },
                name: {
                    color: '#BBF3FF'
                },
                nameGap: 6,
                radius: 50
            }
        ],
        series: [

            {
                type: 'radar',

                itemStyle: {
                    normal: {
                        // areaStyle: {
                        //     type: 'default'
                        // }
                    }
                },
                data: [
                    {
                        name: '2014',
                        value: [
                            21,
                            34,
                            65,
                            87,
                            3,
                            43,
                            1,
                            76,
                            8,
                            100
                        ]
                    }, {
                        name: '2015',
                        value: [
                            12,
                            43,
                            5,
                            7,
                            87,
                            3,
                            8,
                            23,
                            8,
                            19
                        ]
                    }, {
                        name: '2016',
                        value: [
                            89,
                            34,
                            12,
                            57,
                            78,
                            9,
                            3,
                            3,
                            4,
                            61
                        ]
                    }, {
                        name: '2017',
                        value: [
                            12,
                            32,
                            43,
                            54,
                            12,
                            78,
                            4,
                            98,
                            23,
                            9
                        ]
                    }
                ]
            }
        ]
    };
    myChart.setOption(option);

}

function showPieTimeLine() {

    var myChart = echarts.init(document.getElementById('pie-timeLine'));
    var option = {
        baseOption: {
            tooltip: {},
            timeline: {
                axisType: 'category',
                orient: 'horizontal',
                autoPlay: true,
                inverse: true,
                playInterval: 5000,
                symbol: 'image://./src/img/time-line-icon.png',
                symbolSize: 10,
                right: 20,

                top: '90%',
                bottom: 16,
                width: 220,
                height: null,
                label: {
                    normal: {
                        textStyle: {
                            color: '#4BCEEC'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#97B8C9'
                        }
                    }
                },

                lineStyle: {
                    width: 1,
                    color: '#4BCEEC',
                    type: 'dotted'
                },
                checkpointStyle: {
                    symbol: 'image://./src/img/checkpoint-style-icon.png'
                },
                // checkpointStyle: {
                //     color: '#bbb',
                //     borderColor: '#777',
                //     borderWidth: 1
                // },
                controlStyle: {
                    show: false,
                    showNextBtn: false,
                    showPrevBtn: false,
                    normal: {
                        color: '#666',
                        borderColor: '#666'
                    },
                    emphasis: {
                        color: '#aaa',
                        borderColor: '#aaa'
                    }
                },
                itemStyle: {},
                data: ['2017', '2016', '2015', '2014']
            },

            // tooltip: {
            //     trigger: 'item',
            //     formatter: "{a} <br/>{b} : {c} ({d}%)"
            // },
            // backgroundColor: '#fff',
            series: [
                {
                    name: '事故情况',
                    type: 'pie',
                    roseType: 'area',
                    center: [
                        '67%', '50%'
                    ],
                    radius: [
                        20, '45%'
                    ],
                    label: {
                        normal: {
                            show: true,
                            color: '#97B8C9',
                            formatter: '{b},{c}'
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 3,
                            length2: 3
                        }
                    }
                }
            ],
            color: [
                '#3157EC',
                '#ED302E',
                '#21D358',
                '#F8E71C',
                '#DE1C79',
                '#28335F',
                '#D7B171'
            ]
        },
        options: [
            {

                series: [
                    {
                        data: [
                            {
                                value: 10,
                                name: '车辆伤害'
                            }, {
                                value: 5,
                                name: '物体打击'
                            }, {
                                value: 15,
                                name: '机械伤害'
                            }, {
                                value: 25,
                                name: '触电'
                            }, {
                                value: 20,
                                name: '灼烫'
                            }, {
                                value: 35,
                                name: '中毒和窒息'
                            }, {
                                value: 30,
                                name: '其他伤害'
                            }
                        ]
                    }
                ]
            }, {
                series: [
                    {
                        data: [
                            {
                                value: 20,
                                name: '车辆伤害'
                            }, {
                                value: 53,
                                name: '物体打击'
                            }, {
                                value: 15,
                                name: '机械伤害'
                            }, {
                                value: 255,
                                name: '触电'
                            }, {
                                value: 240,
                                name: '灼烫'
                            }, {
                                value: 135,
                                name: '中毒和窒息'
                            }, {
                                value: 130,
                                name: '其他伤害'
                            }
                        ]
                    }
                ]
            }, {

                series: [
                    {
                        data: [
                            {
                                value: 120,
                                name: '车辆伤害'
                            }, {
                                value: 54,
                                name: '物体打击'
                            }, {
                                value: 155,
                                name: '机械伤害'
                            }, {
                                value: 256,
                                name: '触电'
                            }, {
                                value: 230,
                                name: '灼烫'
                            }, {
                                value: 135,
                                name: '中毒和窒息'
                            }, {
                                value: 230,
                                name: '其他伤害'
                            }
                        ]
                    }
                ]
            }, {

                series: [
                    {
                        data: [
                            {
                                value: 10,
                                name: '车辆伤害'
                            }, {
                                value: 15,
                                name: '物体打击'
                            }, {
                                value: 135,
                                name: '机械伤害'
                            }, {
                                value: 25,
                                name: '触电'
                            }, {
                                value: 240,
                                name: '灼烫'
                            }, {
                                value: 325,
                                name: '中毒和窒息'
                            }, {
                                value: 310,
                                name: '其他伤害'
                            }
                        ]
                    }
                ]
            }

        ]
    };
    myChart.setOption(option);

}

function showBar2() {
    var myChart = echarts.init(document.getElementById('bar2'));
    var option = {

        legend: {
            show: true,
            top: '18%',
            x: 'center',
            // formatter: function(name) {
            //     console.log(name);
            // },
            data: [
                '排查隐患数', '未整改隐患数', '检查次数', '整改率'

            ],
            itemWidth: 14,
            itemHeight: 8,
            textStyle: {
                color: '#97B8C9',
                fontSize: 12
            }
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params) {
                var str = '';

                $.each(params, function(index, el) {

                    if (!index) {
                        str += el.name + '<br/>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + el.color + '"></span>' + el.seriesName + ' : ' + el.data + '<br/>';

                    } else if (index === params.length - 1) {
                        str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + el.color + '"></span>' + el.seriesName + ' : ' + el.data + '%<br/>'

                    } else {
                        str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + el.color + '"></span>' + el.seriesName + ' : ' + el.data + '<br/>'
                    }
                    // console.log(str);
                });
                return str
            }

        },
        grid: {
            top: '30%',
            left: '3%',
            right: '1%',
            bottom: '6%',
            containLabel: true
        },

        xAxis: {
            type: 'category',

            // boundaryGap: false,

            axisLine: {
                onZero: false,
                show: true,

                lineStyle: {
                    color: '#1178C9'
                }
            },
            axisLabel: {
                interval: 0,
                // rotate: 45,
                // formatter: function(params) {
                //
                //     if (params.length > 4) {
                //         var _name = params.substring(0, 4) + '\n' + params.substring(4, params.length);
                //         return _name;
                //     }
                //     return params
                // },
                textStyle: {
                    color: '#97B8C9'

                }

            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            data: [
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月'
            ]
        },
        yAxis: [

            {
                type: 'value',
                name: '',
                splitNumber: 5,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {

                    show: true,

                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#97B8C9'

                    }

                }
            }, {
                type: 'value',
                name: '',
                min: 0,
                max: 120,
                splitNumber: 5,
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {

                    show: false,

                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#97B8C9'

                    },
                    formatter: '{value}%'
                }
            }
        ],
        series: [
            {
                name: '排查隐患数',
                type: 'bar',

                itemStyle: {
                    normal: {
                        color: '#3157EC'

                    }
                },
                data: [
                    1,
                    22,
                    2,

                    3,
                    22,
                    2
                ]

            }, {
                name: '未整改隐患数',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: '#ED302E'
                    }
                },
                data: [
                    11,
                    122,
                    12,
                    321,
                    23,
                    13
                ]

            }, {
                name: '检查次数',
                type: 'bar',

                itemStyle: {
                    normal: {
                        color: '#21D358'
                    }
                },
                data: [
                    1,
                    22,
                    2,
                    5,
                    3,
                    22
                ]

            }, {
                name: '整改率',
                type: 'line',
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#fff'
                    }
                },
                data: [
                    1,
                    22,
                    2,
                    5,
                    3,
                    22
                ]

            }
        ]
    };

    myChart.setOption(option);
    myChart.on('click', function(params) {
        if (params.componentSubType === 'line') {
            return
        }
        console.log(params.seriesName, params.name);
        showPie2()
    })

}

function showPie2() {
    var myChart = echarts.init(document.getElementById("pie2"));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },

        // tooltip: {
        //     formatter: '{b} {d}%'
        // },
        color: [
            '#ED302E', '#3157EC', '#7630ED', '#FF8F00'
        ],
        series: [
            {
                name: '企业隐患排查情况',
                type: 'pie',
                // minAngle: 10,

                radius: [
                    '20%', '40%'
                ],
                center: [
                    '50%', '50%'
                ],
                // avoidLabelOverlap: false,

                label: {
                    normal: {
                        formatter: function(v) {

                            var text = v.name
                            return text.length < 4
                                ? text + ',' + v.data.value
                                : text.slice(0, 4) + '\n' + text.slice(4) + ',' + v.data.value

                            //  `${text.slice(0, 4)}\n${text.slice(4)}`
                        },
                        show: true,
                        textStyle: {
                            fontSize: '12',
                            color: '#97B8C9'
                        }

                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '12',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 5,
                        length2: 5
                    }
                },
                data: [
                    {
                        value: 35,
                        name: '公用工程车间'
                    }, {
                        value: 10,
                        name: '硅烷生产车间'
                    }, {
                        value: 10,
                        name: '其他'
                    }, {
                        value: 135,
                        name: '多晶硅生产车间'
                    }
                ]
            }
        ]
    };

    myChart.setOption(option);

}
